---
title: Quickstart
description: Turn your LangGraph into an agent-native application in 10 minutes.
icon: "lucide/Play"
hideTOC: true
---

import {
  TailoredContent,
  TailoredContentOption,
} from "@/components/react/tailored-content.tsx";
import { CoAgentsEnterpriseCTA } from "@/components/react/coagents/coagents-enterprise-cta.tsx";
import { CoAgentsDiagram } from "@/components/react/coagents/coagents-diagram.tsx";
import { FaPython, FaJs, FaCloud } from "react-icons/fa";
import SelfHostingCopilotRuntimeCreateEndpoint from "@/snippets/self-hosting-copilot-runtime-create-endpoint.mdx";
import CopilotCloudConfigureRemoteEndpointLangGraph from "@/snippets/copilot-cloud-configure-remote-endpoint-langgraph.mdx";
import CopilotKitCloudCopilotKitProvider from "@/snippets/copilot-cloud-configure-copilotkit-provider.mdx";
import LangGraphPlatformDeploymentTabs from "@/snippets/langgraph-platform-deployment-tabs.mdx";
import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
import FindYourCopilotRuntime from "@/snippets/find-your-copilot-runtime.mdx";
import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
import CloudCopilotKitProvider from "@/snippets/coagents/cloud-configure-copilotkit-provider.mdx";
import SelfHostingCopilotRuntimeConfigureCopilotKitProvider from "@/snippets/coagents/self-host-configure-copilotkit-provider.mdx";
import SelfHostingCopilotRuntimeLangGraphEndpoint from "@/snippets/self-hosting-copilot-runtime-langgraph-endpoint.mdx";
import SelfHostingCopilotRuntimeStarter from "@/snippets/self-hosting-copilot-runtime-starter.mdx";
import SelfHostingRemoteEndpoints from "@/snippets/self-hosting-remote-endpoints.mdx";
import {
  UserIcon,
  PaintbrushIcon,
  WrenchIcon,
  RepeatIcon,
  ServerIcon,
} from "lucide-react";
import { SiLangchain } from "react-icons/si";
import CopilotUI from "@/snippets/copilot-ui.mdx";
import { PathIcon } from "lucide-react";
import { SquareTerminal, SquareChartGantt } from "lucide-react";

<video
  src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/chat-example.mp4"
  className="rounded-lg shadow-xl"
  loop
  playsInline
  controls
  autoPlay
  muted
/>

## Prerequisites

Before you begin, you'll need the following:

- An OpenAI API key
- Node.js 20+
- Your favorite package manager
- (Optional) A LangSmith API key - only required if using an existing LangGraph agent

## Getting started

<Steps>
    <TailoredContent
        className="step"
        id="agent"
        header={
            <div>
                <p className="text-xl font-semibold">Choose your starting point</p>
                <p className="text-base">
                    You can either start fresh with our starter template or integrate CopilotKit into your existing LangGraph agent.
                </p>
            </div>
        }
    >
        <TailoredContentOption
            id="starter"
            title="Start from scratch"
            description="Get started quickly with our ready-to-go starter application."
        >
            <Step>
                ### Run our CLI

                First, we'll use our CLI to create a new project for us. Choose between Python or JavaScript:

                <Tabs groupId="language_langgraph_agent" items={['Python', 'JavaScript']} persist>
                    <Tab value="Python">
                        ```bash
                        npx copilotkit@latest create -f langgraph-py
                        ```
                    </Tab>
                    <Tab value="JavaScript">
                        ```bash
                        npx copilotkit@latest create -f langgraph-js
                        ```
                    </Tab>
                </Tabs>
            </Step>
            <Step>
                ### Install dependencies

                ```npm
                ```
            </Step>
            <Step>
                ### Configure your environment

                Create a `.env` file in your agent directory and add your OpenAI API key:

                ```plaintext title=".env"
                OPENAI_API_KEY=your_openai_api_key
                ```

                <Callout type="info" title="What about other models?">
                  The starter template is configured to use OpenAI's GPT-4o by default, but you can modify it to use any language model supported by LangGraph.
                </Callout>
            </Step>
            <Step>
                ### Start the development server

                <Tabs groupId="package-manager" items={['npm', 'pnpm', 'yarn', 'bun']}>
                    <Tab value="npm">
                        ```bash
                        npm run dev
                        ```
                    </Tab>
                    <Tab value="pnpm">
                        ```bash
                        pnpm dev
                        ```
                    </Tab>
                    <Tab value="yarn">
                        ```bash
                        yarn dev
                        ```
                    </Tab>
                    <Tab value="bun">
                        ```bash
                        bun dev
                        ```
                    </Tab>
                </Tabs>

                This will start both the UI and agent servers concurrently.
            </Step>
        </TailoredContentOption>
        <TailoredContentOption
            id="bring-your-own"
            title="Use an existing agent"
            description="I already have a LangGraph agent and want to add CopilotKit."
        >
            <Step>
                ### Frontend Setup
                CopilotKit works with any React-based frontend. We'll use Next.js for this example.

                ```bash
                npx create-next-app@latest my-copilot-app
                cd my-copilot-app
                ```
            </Step>
            <Step>
                ### Install CopilotKit packages

                ```npm
                @copilotkit/react-ui @copilotkit/react-core @copilotkit/runtime
                ```
            </Step>
            <Step>
                ### Setup Copilot Runtime

                CopilotKit requires a Copilot Runtime endpoint to safely communicate with your agent. This can be served
                anywhere that Node.js can run, but for this example we'll just use Next.js.

                <SelfHostingCopilotRuntimeLangGraphEndpoint components={props.components} />
            </Step>
            <Step>
                ### Start your LangGraph agent

                <LangGraphPlatformDeploymentTabs components={props.components} />
            </Step>
            <Step>
                ### Configure CopilotKit Provider

                Next, wrap your application with the CopilotKit provider so that CopilotKit can take control across your application
                via the LangGraph agent.

                ```tsx title="app/layout.tsx"
                import { CopilotKit } from "@copilotkit/react-core"; // [!code highlight]
                import "@copilotkit/react-ui/styles.css";

                // ...

                export default function RootLayout({ children }: {children: React.ReactNode}) {
                  return (
                    <html lang="en">
                      <body>
                        {/* [!code highlight:3] */}
                        <CopilotKit runtimeUrl="/api/copilotkit">
                          {children}
                        </CopilotKit>
                      </body>
                    </html>
                  );
                }

                ```
            </Step>
            <Step>
              ### Add the chat interface

              Add the CopilotSidebar component to your page:

              ```tsx title="app/page.tsx"
              import { CopilotSidebar } from "@copilotkit/react-ui"; // [!code highlight]

              export default function Page() {
                return (
                  <main>
                    <h1>Your App</h1>
                    {/* [!code highlight:1] */}
                    <CopilotSidebar />
                  </main>
                );
              }
              ```
            </Step>
        </TailoredContentOption>
    </TailoredContent>
    <Step>
        ### 🎉 Start chatting!

        Your AI agent is now ready to use! Try asking it some questions:

        ```
        Can you tell me a joke?
        ```

        ```
        Can you help me understand AI?
        ```

        ```
        What do you think about React?
        ```

        <Accordions className="mb-4">
            <Accordion title="Troubleshooting">
                - If you're having connection issues, try using `0.0.0.0` or `127.0.0.1` instead of `localhost`
                - Make sure your agent folder contains a `langgraph.json` file
                - In the `langgraph.json` file, reference the path to a `.env` file
                - Check that your OpenAI API key is correctly set in the `.env` file
                - If using an existing agent, ensure your LangSmith API key is also configured
                - Make sure you're in the same folder as your `langgraph.json` file when running the `langgraph dev` command
            </Accordion>
        </Accordions>

    </Step>
</Steps>

## What's next?

Now that you have your basic agent setup, explore these advanced features:

<Cards>
  <Card
    title="Implement Human in the Loop"
    description="Allow your users and agents to collaborate together on tasks."
    href="/langgraph/human-in-the-loop"
    icon={<UserIcon />}
  />
  <Card
    title="Utilize Shared State"
    description="Learn how to synchronize your agent's state with your UI's state, and vice versa."
    href="/langgraph/shared-state"
    icon={<RepeatIcon />}
  />
  <Card
    title="Add some generative UI"
    description="Render your agent's progress and output in the UI."
    href="/langgraph/generative-ui"
    icon={<PaintbrushIcon />}
  />
  <Card
    title="Setup frontend actions"
    description="Give your agent the ability to call frontend tools, directly updating your application."
    href="/langgraph/frontend-actions"
    icon={<WrenchIcon />}
  />
</Cards>
